<template>
    <div>
        <h1>门店修改</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店名称</td>
                    <td><input type="text" v-model="queryInfo.Name"></td>
                </tr>

                <tr>
                    <td align="right">门店电话</td>
                    <td><input type="text" v-model="queryInfo.Phone"></td>
                </tr>

                <tr>
                    <td align="right">门店地址</td>
                    <td><input type="text" v-model="queryInfo.Address"></td>
                </tr>

                <tr>
                    <td align="right">门店是否启用</td>
                    <td>
                        <input type="radio" name="use" v-model="queryInfo.State":value=1>是
                        <input type="radio" name="use" v-model="queryInfo.State":value=0>否
                    </td>
                </tr>

                <tr>
                    <td align="right">门店图片</td>
                    <td>
                        <input type="file" @change="changeImg">
                        <img :src="queryInfo.Photo" width="100" height="100">
                    </td>
                </tr>

                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="修改" @click="ok"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

let queryInfo = reactive({
    Id:route.query.id,
  Name: '',
  Phone: '',
  Address: '',
  Photo: '',
  State: 0,
})

onMounted(() => {
    getlist();
})

const getlist = () => {
    axios({
        url:'/api/Shop/FanShop',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then((res) => {
        console.log(res);
        queryInfo.Name = res.data.Name;
        queryInfo.Phone = res.data.Phone;
        queryInfo.Address = res.data.Address;
        queryInfo.Photo = res.data.Photo;
        queryInfo.State = res.data.State;
    })
    .catch((err) => {
        console.log(err);
    })
}

const changeImg = (e:any) => {
   let file = e.target.files[0];
   let formdata = new FormData();
   formdata.append('file',file);
   axios
   .post("https://localhost:7236/api/Commons/GetImgUrl",formdata)
   .then((res) => {
       console.log(res);
       queryInfo.Photo = res.data;
   })
   .catch((err)=>{
       console.log(err);
   })
}


const ok = () => {
    alert(queryInfo.State);
    //1.判断非空+有效性
    if(queryInfo.Name == '')
    {
        alert('门店名称不能为空');
        return;
    }
    if(queryInfo.Phone == '')
    {
        alert('门店电话不能为空');
        return;
    }
    if(queryInfo.Address == '')
    {
        alert('门店地址不能为空');
        return;
    }
    if(queryInfo.Photo == '')
    {
        alert('门店图片不能为空');
        return;
    }
    //2.发送网络请求
    axios({
        url:'/api/Shop/UpdShop',
        method:'put',
        data:queryInfo
    })
    .then((res) => {
        console.log(res);
        if(res.data == -1)
        {
            alert('门店名称不能重复');
            return;
        }
        if(res.data == -2)
        {
            alert('修改失败');
            return;
        }
        if(res.data == 1)
        {
            alert('修改成功');
            router.push('/shoplist');
        }
    })
    .catch((err) => {
        console.log(err);
    })
}
</script>

<style scoped>

</style>